<template>
  <el-dialog model-value="dialogVisible" :title="社团详情" :size="formSize" width="30%" @close="handleClose">
    <el-form :model="clubFrom" label-width="120px">
      <el-form-item label="封面">
        <el-image v-if="imgUrl" :src="getServerUrl() + imgUrl" :preview-src-list="[getServerUrl() + imgUrl]"
          :zoom-rate="1.2" fit="cover" style="width: 100px; height: 100px" />
      </el-form-item>
      <el-form-item label="社团编号">
        <el-input disabled v-model="clubFrom.clubNumber" />
      </el-form-item>
      <el-form-item label="社团名称">
        <el-input disabled v-model="clubFrom.clubName" />
      </el-form-item>
      <el-form-item label="创建人">
        <el-input disabled v-model="clubFrom.createName" />
      </el-form-item>
      <el-form-item label="成立时间">
        <el-input disabled v-model="clubFrom.clubCreate" />
      </el-form-item>
      <el-form-item label="社团的简介">
        <el-input disabled v-model="clubFrom.clubMessage" type="textarea" />
      </el-form-item>
      <el-form-item label="申请说明">
        <el-input disabled v-model="clubFrom.clubRemark" type="textarea" />
      </el-form-item>
      <el-form-item label="社团类型">
        <el-input disabled v-model="clubFrom.clubType" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input disabled v-model="clubFrom.createTime" />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';
import requestUtil, { getServerUrl } from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus'

const formSize = ref('default')
const clubFrom = ref({
  imageUrl: '',
  clubNum: '',
  clubName: '',
  createName: '',
  clubCreate: '',
  clubMessage: '',
  clubRemark: '',
  clubType: '',
  createTime: ''
})

const imgUrl = ref(null)

const dialogVisible = ref(false);

const props = defineProps(
  {
    id: {
      type: Number,
      default: -1,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      default: false,
      required: true
    }
  }
)


watch(async () => {
  dialogVisible.value = props.dialogVisible;
  let id = props.id;
  if (id != -1) {
    const res = await requestUtil.get('/club/msgByClubId/' + id);
    console.log('code', res.data.code);
    if (res.data.code === 200) {
      console.log('club', res.club);
      clubFrom.value = res.data.club;
      imgUrl.value = res.data.club.imageUrl;
    } else {
      ElMessage[
        {
          type: 'error',
          message: res.data.msg
        }
      ]
    }
  }

})

</script>
<style>

</style>